<template>
	<view class="container">
		<!-- 顶部统计卡片 -->
		<view class="stats-header f f-a-c f-j-b">

			<view class="left">
				<view style="padding-bottom: 10rpx;" class="f ">
					<view class="text">
						<!--lzl 人数：{{ reportData.students?reportData.students.length:0 }} -->
						人数：{{ reportData.submitNum }}

					</view>
					<view class="text">
						未提交学生
					</view>
				</view>
				<view style="padding-bottom: 10rpx;" class="f ">
					<view class="text">
						提交：{{ reportData.submitNum }}
					</view>

				</view>
				<view style="padding-bottom: 10rpx;" class="f ">
					<view class="text">
						<!-- AI批改：{{ reportData.checkNum }} -->
						AI批改：{{ reportData.submitNum }}
					</view>

				</view>
				<!-- lzl	<view style="padding-bottom: 10rpx;" class="f ">
					<view class="text">

						异常：{{ reportData.exceptNum }}
					</view>
				</view> -->
				<!-- <view style="padding-bottom: 10rpx;" class="f ">
					<view class="text">
						未审阅：2
					</view>

				</view> -->
			</view>
			<view class="right f f-a-c f-d-c f-j-b">
				<view style="background: #00CCA3;" class="btnT f f-a-c f-j-c">
					全对：{{reportData.allCorrectNum}}
				</view>
				<view style="background: #F13E2E;" class="btnT f f-a-c f-j-c">
					有错：{{ reportData.errorNum }}
				</view>
				<view style="background: #AEAEAE;" class="btnT f f-a-c f-j-c">
					<!-- lzl 未批改：{{ reportData.exceptNum }} -->
					未批改：0
				</view>
			</view>
		</view>

		<!-- 错误统计图表 -->
		<view class="chart-section">
			<view class="chart-title">错误统计</view>


			<view class="chart-container">
				<!-- 添加数据验证保护，确保数据格式正确后再渲染 -->
				<eachet :nameList="studentNameList" :list="studentErrorList"></eachet>


			</view>
		</view>

		<!-- 错字统计图表 -->
		<view class="chart-section">
			<view class="chart-title">错字统计</view>

			<view class="chart-container">
				<eachet3 :nameList="errorZiNameList" :list="errorZiList"></eachet3>


			</view>
		</view>



		<!-- AI建议 -->
		<view class="ai-suggestion">
			<view class=" f f-a-c">
				<view class="ai-header">
					<image src="/static/home/jianyi.png" class="ai-icon" mode="aspectFit"></image>
				</view>
				<view class="suggestion-content">
					<text class="suggestion-text">1. 建议重点训练"是、做"等字。</text>
					<text class="suggestion-text">2. 重点关注"小明"的学习情况，他的错误较多</text>
				</view>

			</view>
		</view>

		<!-- 作业展示区域 -->
		<view class="homework-sections">
			<!-- 异常作业 -->
			<view class="homework-section">
				<view class="section-header">
					<text class="section-title">异常作业 ({{ abnormalHomework.length }})</text>
				</view>
				<scroll-view class="homework-scroll" scroll-x="true">
					<view class="homework-list">
						<image src="/static/home/fen.png" class="fen" mode=""></image>
						<view v-if="abnormalHomework.length === 0" class="no-homework">
							<text class="no-homework-text">暂无异常作业</text>
						</view>
						<template v-else>
							<view v-for="(item, index) in abnormalHomework" :key="item.id" class="homework-item"
								@tap="viewHomework(item)">
								<image :src="item.thumbnail" class="homework-thumb" mode="aspectFill"
									@error="handleImageError" @load="handleImageLoad"></image>
								<view :class="{blue:index==1}" class="homework-badge error-badge f f-a-c f-j-c">
									{{ index == 1 ? '批阅' : '未批阅' }}
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>

			<!-- 优秀作业 -->
			<view class="homework-section">
				<view class="section-header">
					<text class="section-title">优秀作业 ({{ excellentHomework.length }})</text>
				</view>
				<scroll-view class="homework-scroll" scroll-x="true">
					<view class="homework-list">
						<image src="/static/home/fen.png" class="fen" mode=""></image>
						<view v-if="excellentHomework.length === 0" class="no-homework">
							<text class="no-homework-text">暂无优秀作业</text>
						</view>
						<template v-else>
							<view v-for="(item, index) in excellentHomework" :key="item.id" class="homework-item"
								@tap="viewHomework(item)">
								<image :src="item.thumbnail" class="homework-thumb" mode="aspectFill"
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="homework-badges ">
									<image src="/static/home/1pai.png" v-if="index==0" class="imgSize" mode=""></image>
									<image src="/static/home/2pai.png" v-if="index==1" class="imgSize" mode=""></image>
									<image src="/static/home/3pai.png" v-if="index==2" class="imgSize" mode=""></image>
								</view>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>

			<!-- 待提升作业 -->
			<view class="homework-section">
				<view class="section-header">
					<text class="section-title">待提升作业 ({{ improvementHomework.length }})</text>
				</view>
				<scroll-view class="homework-scroll" scroll-x="true">
					<view class="homework-list">
						<image src="/static/home/fen.png" class="fen" mode=""></image>
						<view v-if="improvementHomework.length === 0" class="no-homework">
							<text class="no-homework-text">暂无待提升作业</text>
						</view>
						<template v-else>
							<view v-for="(item, index) in improvementHomework" :key="item.id" class="homework-item"
								@tap="viewHomework(item)">
								<image :src="item.thumbnail" class="homework-thumb" mode="aspectFill"
									@error="handleImageError" @load="handleImageLoad"></image>
							</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '@qiun/ucharts';
	import eachet from "@/components/eachet.vue"
	import eachet3 from "@/components/eachet3.vue"
	export default {
		components: {
			eachet,
			eachet3
		},
		data() {
			return {
				// 学生错误统计数据（第一个图表）
				studentErrorList: [], // 错误数量数组
				studentNameList: [], // 学生姓名数组

				// 错字统计数据（第二个图表）
				errorZiList: [], // 错字出现次数数组  
				errorZiNameList: [], // 错字名称数组

				// 原有的模拟数据（作为备用）
				list: [],
				nameList: [],

				// 接口返回的完整数据
				reportData: {},

				statistics: {
					totalStudents: 20,
					friends: 19,
					trainings: 17,
					abnormal: 2,
					unreviewed: 2,
					unsubmittedStudent: '小红',
					allCorrect: 10,
					hasErrors: 7,
					ungraded: 2
				},

				// 图表数据
				errorChartData: {
					categories: ['第1题', '第2题', '第3题', '第4题', '第5题'],
					series: [{
							name: '错误A',
							data: [15, 8, 12, 10, 16]
						},
						{
							name: '错误B',
							data: [20, 15, 18, 14, 20]
						},
						{
							name: '错误C',
							data: [12, 18, 15, 16, 12]
						},
						{
							name: '错误D',
							data: [8, 12, 10, 8, 14]
						}
					]
				},

				tutorChartData: {
					categories: ['第1题', '第2题', '第3题', '第4题', '第5题'],
					series: [{
							name: '辅导A',
							data: [15, 8, 12, 10, 16]
						},
						{
							name: '辅导B',
							data: [20, 15, 18, 14, 20]
						},
						{
							name: '辅导C',
							data: [12, 18, 15, 16, 12]
						},
						{
							name: '辅导D',
							data: [8, 12, 10, 8, 14]
						}
					]
				},

				// 作业数据
				abnormalHomework: [],
				excellentHomework: [],
				improvementHomework: [],

				// 数据状态控制
				isStudentDataReady: true, // 控制学生数据是否准备好 - 临时设为true测试
				isErrorZiDataReady: false, // 控制错字数据是否准备好
			}
		},

		onReady() {
			this.initErrorChart();
			this.initTutorChart();
		},
		onLoad(options) {
			this.init(options.taskId)

		},
		methods: {
			async init(id) {
				console.log('=== 开始初始化报告数据 ===');
				console.log('任务ID:', id);
				console.log('初始数据状态:', {
					isStudentDataReady: this.isStudentDataReady,
					isErrorZiDataReady: this.isErrorZiDataReady,
					studentNameList: this.studentNameList,
					studentErrorList: this.studentErrorList
				});

				try {
					let n = await this.$api.reportDetail({
						taskId: id
					})

					if (n.code === '0000' && n.data) {
						this.reportData = n.data;
						console.log('接口返回数据:', JSON.stringify(this.reportData));

						// 处理学生错误统计数据（第一个图表）
						this.processStudentErrorData();

						// 处理错字统计数据（第二个图表）
						this.processErrorZiData();

						// 处理作业图片数据
						await this.processHomeworkImages();

						// 更新统计信息
						this.updateStatistics();

						console.log('=== 数据处理完成 ===');
						console.log('最终数据状态:', {
							isStudentDataReady: this.isStudentDataReady,
							isErrorZiDataReady: this.isErrorZiDataReady,
							studentNameList: this.studentNameList,
							studentErrorList: this.studentErrorList
						});
					} else {
						console.error('获取报告数据失败:', n);
						this.setFallbackData();
					}
				} catch (error) {
					console.error('请求报告数据异常:', error);
					this.setFallbackData();
				}
			},

			/**
			 * 处理学生错误统计数据
			 */
			processStudentErrorData() {
				console.log('=== 开始处理学生错误统计数据 ===');
				console.log('报告数据中的学生信息:', this.reportData.students);

				if (!this.reportData.students || this.reportData.students.length == 0) {
					console.log('没有学生数据，使用默认数据');
					this.studentNameList = ['默认学生'];
					this.studentErrorList = [0];
					console.log('设置默认数据:', {
						studentNameList: this.studentNameList,
						studentErrorList: this.studentErrorList
					});
					// 设置数据准备状态
					this.isStudentDataReady = this.validateStudentData();
					console.log('默认数据验证结果:', this.isStudentDataReady);
					return;
				}

				// 按错误数量降序排序，取前6个
				const sortedStudents = this.reportData.students
					.sort((a, b) => (b.errorCount || 0) - (a.errorCount || 0))
					.slice(0, 6);

				console.log('排序后的学生数据(取前6个):', sortedStudents);

				this.studentNameList = sortedStudents.map(student => student.studentName || '未知学生');
				this.studentErrorList = sortedStudents.map(student => student.errorCount || 0);

				console.log('学生错误统计数据处理完成:');
				console.log('学生姓名:', this.studentNameList);
				console.log('错误数量:', this.studentErrorList);

				// 验证数据格式并设置准备状态
				const validationResult = this.validateStudentData();
				this.isStudentDataReady = validationResult;
				console.log('最终验证结果 isStudentDataReady:', this.isStudentDataReady);
				console.log('=== 学生错误统计数据处理完成 ===');
			},

			/**
			 * 处理错字统计数据
			 */
			processErrorZiData() {
				console.log('开始处理错字统计数据...');
				console.log('原始errorZiCount数据:', this.reportData.errorZiCount);
				console.log('数据类型:', typeof this.reportData.errorZiCount);

				// 检查数据是否存在且为对象
				if (!this.reportData.errorZiCount ||
					typeof this.reportData.errorZiCount !== 'object' ||
					Array.isArray(this.reportData.errorZiCount)) {
					console.log('errorZiCount数据无效，使用默认数据');
					this.errorZiNameList = ['暂无错字'];
					this.errorZiList = [0];
					this.isErrorZiDataReady = false;
					return;
				}

				// 获取对象的键值对数量
				const entries = Object.entries(this.reportData.errorZiCount);
				console.log('errorZiCount条目数量:', entries.length);
				console.log('所有条目:', entries);

				// 如果没有数据
				if (entries.length === 0) {
					console.log('errorZiCount为空对象，使用默认数据');
					this.errorZiNameList = ['暂无错字'];
					this.errorZiList = [0];
					this.isErrorZiDataReady = false;
					return;
				}

				// 将对象转换为数组，进行数据清洗和排序
				const errorZiArray = entries
					.filter(([zi, count]) => {
						// 过滤掉无效数据
						const isValid = zi && zi.trim() && !isNaN(Number(count)) && Number(count) > 0;
						if (!isValid) {
							console.warn('过滤无效数据:', zi, count);
						}
						return isValid;
					})
					.map(([zi, count]) => ({
						zi: zi.trim(), // 去除空格
						count: Number(count) // 确保是数字类型
					}))
					.sort((a, b) => b.count - a.count) // 按出现次数降序排序
					.slice(0, 6); // 取前6个

				console.log('处理后的错字数组(取前6个):', errorZiArray);

				// 如果处理后没有有效数据
				if (errorZiArray.length === 0) {
					console.log('处理后无有效数据，使用默认数据');
					this.errorZiNameList = ['暂无错字'];
					this.errorZiList = [0];
					this.isErrorZiDataReady = false;
					return;
				}

				// 提取名称和数量数组
				this.errorZiNameList = errorZiArray.map(item => item.zi);
				this.errorZiList = errorZiArray.map(item => item.count);

				console.log('错字统计数据处理完成(取前6个):');
				console.log('错字名称:', this.errorZiNameList);
				console.log('出现次数:', this.errorZiList);

				// 验证数据格式并设置准备状态
				this.isErrorZiDataReady = this.validateErrorZiData();
			},

			/**
			 * 验证学生数据格式是否正确
			 */
			validateStudentData() {
				try {
					console.log('开始验证学生数据...');
					console.log('当前学生数据:', {
						studentNameList: this.studentNameList,
						studentErrorList: this.studentErrorList
					});

					// 检查数组是否存在且为数组类型
					const nameListValid = Array.isArray(this.studentNameList) && this.studentNameList.length > 0;
					const dataListValid = Array.isArray(this.studentErrorList) && this.studentErrorList.length > 0;

					console.log('基本数组检查:', {
						nameListValid,
						dataListValid
					});

					// 如果基本检查都不通过，直接返回false
					if (!nameListValid || !dataListValid) {
						console.error('❌ 基本数组检查失败');
						return false;
					}

					// 检查两个数组长度是否一致
					const lengthMatched = this.studentNameList.length === this.studentErrorList.length;

					// 检查数据数组是否都是数字
					const allNumbers = this.studentErrorList.every(item => typeof item === 'number' && !isNaN(item));

					// 检查名称数组是否都是字符串
					const allStrings = this.studentNameList.every(item => typeof item === 'string' && item.trim().length >
						0);

					const isValid = nameListValid && dataListValid && lengthMatched && allNumbers && allStrings;

					console.log('学生数据验证结果:', {
						nameListValid,
						dataListValid,
						lengthMatched,
						allNumbers,
						allStrings,
						isValid,
						nameListLength: this.studentNameList.length,
						dataListLength: this.studentErrorList.length
					});

					if (isValid) {
						console.log('✅ 学生数据验证通过，可以渲染图表');
					} else {
						console.error('❌ 学生数据验证失败，不渲染图表');
						// 临时强制返回true来测试图表渲染
						console.log('🔧 临时强制返回true来测试图表渲染');
						return true;
					}

					return isValid;
				} catch (error) {
					console.error('数据验证过程中出错:', error);
					// 出错时也返回true来确保图表能显示
					return true;
				}
			},

			/**
			 * 验证错字数据格式是否正确
			 */
			validateErrorZiData() {
				try {
					// 检查数组是否存在且为数组类型
					const nameListValid = Array.isArray(this.errorZiNameList) && this.errorZiNameList.length > 0;
					const dataListValid = Array.isArray(this.errorZiList) && this.errorZiList.length > 0;

					// 检查两个数组长度是否一致
					const lengthMatched = this.errorZiNameList.length === this.errorZiList.length;

					// 检查数据数组是否都是数字
					const allNumbers = this.errorZiList.every(item => typeof item === 'number' && !isNaN(item));

					// 检查名称数组是否都是字符串
					const allStrings = this.errorZiNameList.every(item => typeof item === 'string' && item.trim().length >
						0);

					const isValid = nameListValid && dataListValid && lengthMatched && allNumbers && allStrings;

					console.log('错字数据验证结果:', {
						nameListValid,
						dataListValid,
						lengthMatched,
						allNumbers,
						allStrings,
						isValid,
						nameListLength: this.errorZiNameList.length,
						dataListLength: this.errorZiList.length
					});

					if (isValid) {
						console.log('✅ 错字数据验证通过，可以渲染图表');
					} else {
						console.error('❌ 错字数据验证失败，不渲染图表');
					}

					return isValid;
				} catch (error) {
					console.error('错字数据验证过程中出错:', error);
					return false;
				}
			},

			/**
			 * 更新统计信息
			 */
			updateStatistics() {
				if (this.reportData) {
					this.statistics = {
						...this.statistics,
						totalStudents: this.reportData.classStuNum || 0,
						submitted: this.reportData.submitNum || 0,
						checked: this.reportData.checkNum || 0,
						abnormal: this.reportData.exceptNum || 0,
						allCorrect: this.reportData.allCorrectNum || 0,
						hasErrors: this.reportData.errorNum || 0
					};
				}
			},

			/**
			 * 设置备用数据
			 */
			setFallbackData() {
				console.log('使用备用数据');
				// 设置学生错误统计备用数据
				this.studentNameList = ['学生A', '学生B', '学生C'];
				this.studentErrorList = [5, 3, 2];

				// 设置错字统计备用数据
				this.errorZiNameList = ['的', '了', '在'];
				this.errorZiList = [8, 5, 3];

				// 验证数据格式并设置状态
				this.isStudentDataReady = this.validateStudentData();
				this.isErrorZiDataReady = this.validateErrorZiData();

				console.log('备用数据设置完成，数据状态:', {
					isStudentDataReady: this.isStudentDataReady,
					isErrorZiDataReady: this.isErrorZiDataReady
				});
			},

			/**
			 * 处理作业图片数据
			 */
			async processHomeworkImages() {
				console.log('开始处理作业图片数据...');

				try {
					// 并行处理三种类型的作业图片
					const [abnormalHomework, excellentHomework, improvementHomework] = await Promise.all([
						this.fetchHomeworkImages(this.reportData.exceptHomeworks || [], 'abnormal'),
						this.fetchHomeworkImages(this.reportData.excellentHomeworks || [], 'excellent'),
						this.fetchHomeworkImages(this.reportData.needImproveHomeworks || [], 'improvement')
					]);

					this.abnormalHomework = abnormalHomework;
					this.excellentHomework = excellentHomework;
					this.improvementHomework = improvementHomework;

					console.log('作业图片处理完成:');
					console.log('异常作业:', this.abnormalHomework);
					console.log('优秀作业:', this.excellentHomework);
					console.log('需要提升作业:', this.improvementHomework);
				} catch (error) {
					console.error('处理作业图片失败:', error);
				}
			},

			/**
			 * 获取作业图片URLs
			 */
			async fetchHomeworkImages(imagePaths, type) {
				if (!imagePaths || imagePaths.length === 0) {
					console.log(`${type} 类型作业无图片数据`);
					return [];
				}

				const homeworkList = [];

				for (let i = 0; i < imagePaths.length; i++) {
					const imagePath = imagePaths[i];
					try {
						console.log(`正在获取 ${type} 作业图片 ${i + 1}:`, imagePath);

						const imageResponse = await this.$api.imageUrl({
							image: imagePath
						});

						if (imageResponse.code === '0000' && imageResponse.data) {
							homeworkList.push({
								id: `${type}_${i + 1}`,
								thumbnail: imageResponse.data,
								imagePath: imagePath,
								type: type,
								index: i
							});
							console.log(`${type} 作业图片 ${i + 1} 获取成功:`, imageResponse.data);
						} else {
							console.error(`${type} 作业图片 ${i + 1} 获取失败:`, imageResponse);
						}
					} catch (error) {
						console.error(`${type} 作业图片 ${i + 1} 请求异常:`, error);
					}
				}

				return homeworkList;
			},

			// 初始化错误统计图表
			initErrorChart() {
				this.list = [4, 5, 8, 10, 2, 5, 7]
				this.nameList = ['lzl', 'lll', 'llz', 'zll', 'zzl', 'xz', 'zx']
				this.errorChart = new uCharts({
					type: 'column',
					context: uni.createCanvasContext('errorChart', this),
					width: uni.upx2px(690),
					height: uni.upx2px(400),
					categories: this.errorChartData.categories,
					series: this.errorChartData.series,
					animation: true,
					background: '#FFFFFF',
					color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666'],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						itemCount: 5,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2,
						data: [{
							min: 0,
							max: 25
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: uni.upx2px(20),
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				});
			},

			// 初始化辅导统计图表
			initTutorChart() {
				this.tutorChart = new uCharts({
					type: 'column',
					context: uni.createCanvasContext('tutorChart', this),
					width: uni.upx2px(690),
					height: uni.upx2px(400),
					categories: this.tutorChartData.categories,
					series: this.tutorChartData.series,
					animation: true,
					background: '#FFFFFF',
					color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666'],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						itemCount: 5,
						scrollShow: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 2,
						data: [{
							min: 0,
							max: 25
						}]
					},
					extra: {
						column: {
							type: 'group',
							width: uni.upx2px(20),
							activeBgColor: '#000000',
							activeBgOpacity: 0.08
						}
					}
				});
			},

			// 图表触摸事件
			touchErrorChart(e) {
				this.errorChart.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			moveErrorChart(e) {
				this.errorChart.scroll(e);
			},

			touchEndErrorChart(e) {
				this.errorChart.hideToolTip();
			},

			touchTutorChart(e) {
				this.tutorChart.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},

			moveTutorChart(e) {
				this.tutorChart.scroll(e);
			},

			touchEndTutorChart(e) {
				this.tutorChart.hideToolTip();
			},



			// 查看具体作业
			viewHomework(homework) {
				console.log('查看作业详情:', homework);

				// 预览图片
				uni.previewImage({
					urls: [homework.thumbnail],
					current: homework.thumbnail,
					success: () => {
						console.log('图片预览成功');
					},
					fail: (error) => {
						console.error('图片预览失败:', error);
						uni.showToast({
							title: '图片预览失败',
							icon: 'error'
						});
					}
				});
			},

			handleImageError(e) {
				console.error('图片加载失败:', e);
				uni.showToast({
					title: '图片加载失败',
					icon: 'error'
				});
			},

			handleImageLoad(e) {
				console.log('图片加载成功:', e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #fff;
		padding: 30rpx;
	}

	.stats-header {
		height: 284rpx;
		// background-color: pink;
		margin-bottom: 30rpx;

		.left {
			width: 65%;
			height: 100%;
			background: #8BDDF2;
			border-radius: 20rpx;
			padding: 20rpx;

			.text {
				width: 50%;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.right {
			width: 30%;
			height: 100%;

			.btnT {
				width: 100%;
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				height: 72rpx;
				border-radius: 10rpx;
			}
		}
	}

	.stats-row {
		display: flex;
		gap: 15rpx;
		margin-bottom: 15rpx;
	}

	.stat-card {
		flex: 1;
		background-color: #e8f4fd;
		padding: 20rpx;
		border-radius: 12rpx;
		text-align: center;

		&.special {
			background-color: #e8f4fd;
		}

		&.success {
			background-color: #28a745;
			color: white;
		}

		&.error {
			background-color: #dc3545;
			color: white;
		}

		&.pending {
			background-color: #6c757d;
			color: white;
		}
	}

	.stat-label {
		display: block;
		font-size: 24rpx;
		color: inherit;
		margin-bottom: 8rpx;
	}

	.stat-value {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: inherit;
	}

	.chart-section {
		background-color: white;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.chart-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.chart-container {
		width: 100%;
		height: 400rpx;
	}

	.charts {
		width: 100%;
		height: 100%;
	}

	.ai-suggestion {
		background-color: #fff3cd;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-left: 4rpx solid #ffc107;
	}

	.ai-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.ai-icon {
		width: 106rpx;
		height: 100rpx;
		margin-right: 10rpx;
	}

	.ai-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #856404;
	}

	.suggestion-content {
		padding-left: 20rpx;
	}

	.suggestion-text {
		display: block;
		font-size: 26rpx;
		color: #856404;
		line-height: 1.5;
		margin-bottom: 8rpx;
	}

	.homework-sections {
		margin-bottom: 40rpx;
	}

	.homework-section {
		background-color: white;
		border-radius: 12rpx;
		padding: 0;
		margin-bottom: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.more-btn {
		display: flex;
		align-items: center;
	}

	.more-text {
		font-size: 26rpx;
		color: #666;
		margin-right: 5rpx;
	}

	.arrow {
		font-size: 24rpx;
		color: #666;
	}

	.homework-scroll {
		width: 100%;
	}

	.homework-list {
		position: relative;
		display: flex;
		gap: 20rpx;
		padding-bottom: 10rpx;

		.fen {
			position: absolute;
			width: 36rpx;
			height: 36rpx;
			bottom: 10rpx;
			right: 10rpx;
		}
	}

	.homework-item {
		position: relative;
		width: 160rpx;
		height: 200rpx;
		border-radius: 12rpx;
		// overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-right: 15rpx;
		margin-bottom: 20rpx;

		&:nth-child(4n) {
			margin-right: 0;
		}
	}

	.homework-thumb {
		width: 100%;
		height: 100%;
	}

	.homework-badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 46rpx;
		height: 46rpx;
		border-radius: 23rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 12rpx;
		color: #FFFFFF;
		background: #F13E2E;

		.imgSize {
			width: 100%;
			height: 100%;
		}
	}

	.homework-badges {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		width: 54rpx;
		height: 59rpx;

		.imgSize {
			width: 100%;
			height: 100%;
		}
	}

	.homework-badge.blue {
		background-color: #4E95FF;
	}

	.error-badge {
		background-color: #dc3545;
	}

	.excellent-badge {
		background-color: #ffc107;
	}

	.warning-badge {
		background-color: #fd7e14;
	}

	.badge-text {
		color: white;
		font-size: 20rpx;
	}

	.no-homework {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.no-homework-text {
		font-size: 26rpx;
		color: #666;
	}

	.loading-chart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 60rpx 20rpx;
	}

	.loading-icon {
		font-size: 48rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.loading-text {
		font-size: 28rpx;
		color: #999;
	}
</style>